<template>
	<view class="regist">
		<view class="regist-title">
			<text>手机号码注册</text>
		</view>
		<view class="regist-form">
			<uni-forms ref="form" :modelValue="form" label-position="top" :rules="rules">
				<uni-forms-item label=" " name="login_id">
					<uni-easyinput startFix="temp" type="text" maxlength="11" v-model="form.login_id" placeholder="手机号" />
				</uni-forms-item>
				<uni-forms-item label=" " name="mobile_code" class="">
					<view class="code">
						<view class="get-code" :style="{'color':getCodeBtnColor}" @tap.stop="getCode()">{{getCodeText}}</view>
						<uni-easyinput startFix="temp" :clearable="false" maxlength="4" :inputBorder="false" placeholder-style="color:#2f2f2f;" type="text" v-model="form.mobile_code" placeholder="验证码" />
					</view>
				</uni-forms-item>
				<uni-forms-item label=" " name="pass1">
					<uni-easyinput startFix="temp" type="password" v-model="form.pass1" placeholder="设置密码(至少6位)" />
				</uni-forms-item>
			</uni-forms>
			<view class="regist-info">
				<text>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</text>
			</view>
		</view>
		<view class="regist-btn">
			<button type="default" @click="handleRegist">同意并提交</button>
		</view>
	</view>
</template>

<script>
	import {doRegist,getLoginCode} from '@/api/login.js'
	import {globalMixin} from '@/util/globalMixin.js'
	import {getLoginUserDetail} from '@/api/user.js'
	export default {
		mixins:[globalMixin],
		components: {
		},
		data() {
			return {
				getCodeText:'获取验证码',
				getCodeBtnColor:"#62b5fe",
				getCodeisWaiting:false,
				code:'',
				Timer: null,
				rules: {
					// 对name字段进行必填验证
					login_id: {
						rules: [{
								required: true,
								errorMessage: '请输入手机号',
							},
							{
								minLength: 11,
								maxLength: 11,
								errorMessage: '手机号长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					login_pass: {
						rules: [{
								required: true,
								errorMessage: '请输入密码',
							},
							{
								minLength: 6,
								maxLength: 20,
								errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
				},
				form: {
					login_id: null,
					login_pass: null,
					platform: 'wap'
				}
			}
		},
		mounted() {
		},
		methods: {
			setTimer(){
				let holdTime = 60;
				this.getCodeText = "重新获取(60)"
				this.Timer = setInterval(()=>{
					if(holdTime<=0){
						this.restart();
						clearInterval(this.Timer);
						return ;
					}
					this.getCodeText = "重新获取("+holdTime+")"
					holdTime--;
					
				},1000)
			},
			restart(){
				this.getCodeisWaiting = false;
				this.getCodeBtnColor = "#62b5fe";
				this.getCodeText = "获取验证码"
			},
			getCode(){
				uni.hideKeyboard()
				if(this.getCodeisWaiting){
					return ;
				}
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.login_id))){ 
					uni.showToast({title: '请填写正确手机号码',icon:"none"});
					return false; 
				} 
				
				this.getCodeText = "发送中..."
				this.getCodeisWaiting = true;
				this.getCodeBtnColor = "#999"
				// 发送验证码
				this.sendSMS();
			},
			sendSMS(uuid){
				getLoginCode({mobile:this.form.login_id}).then(res=>{
					if(res.code == 0) {
						uni.showToast({title: '验证码已发送',icon:"none"});
						this.setTimer();
					} else{
						this.restart()
					}
				}).catch((err) => {
					uni.showToast({title: '请求获取验证码失败',icon:"none"});
					console.error(err)
					this.restart()
				})
				
				//uni.showToast({title: '请求获取验证码失败',icon:"none"});
				//console.error(err)
				//this.restart()
			},
			handleRegist() {
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.login_id))){
					uni.showToast({title: '请填写正确手机号码',icon:"none"});
					return false; 
				}
				uni.showLoading();
				this.$refs.form.validate().then(res=>{
					let result = doRegist({...res,platform:'wap',supid:this.getSupId()})
					result.then(r => {
						uni.hideLoading()
						if(r.code == 0) {
							// 登录成功
							setAccessToken(r.data.token)
							// 获取登录用户信息
							getLoginUserDetail({uid:r.data.user.user_id}).then(x => {
								if(x.code == 0) {
									// 登录成功
									setBaseUser(x.data)
									uni.showModal({
										title: '注册提示',
										content: '注册成功，按确定返回登录',
										showCancel:false,
										success: (c)=>{
											var pages = getCurrentPages(); // 当前页面
											if(pages && pages.length > 1) {
												var beforePage = pages[pages.length - 2]; // 前一个页面
												uni.navigateBack({
													 success: function() {
														 beforePage.onLoad(); // 执行前一个页面的onLoad方法
													 }
												})
											} else {
												uni.switchTab({
													url: '/pages/user/user'
												})
											}
										}
									});
								}
							})
						}
					})
				}).catch(err =>{
					uni.hideLoading()
					console.log('表单错误信息：', err);
				})
			},
			invokeReg() {
				// 跳转注册
				uni.navigateTo({
					url:'/pages/user/regist'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.regist {
		padding: 0 40rpx 40rpx 40rpx;
		.regist-title {
			height: 120rpx;
			line-height: 120rpx;
			font-weight: 600;
			font-size: 36rpx;
		}
		.regist-form {
			.login-password {
				margin-top: 40rpx;
			}
			.regist-info {
				display: inline-block;
				text-align: justify;
				vertical-align: top;
				color: #949494;
				&::after {
					display: inline-block;
					width: 100%;
					content: '';
					height: 0;
				}
			}
		}
		.regist-btn {
			margin-top: 80rpx;
			button {
				width: 100%;
				border-radius: 0;
				background-color: black;
				color: #ffff;
				font-size: 30rpx;
				height: 80rpx;
				line-height: 80rpx;
			}
		}
	}
	.code{
		position: relative;
		display: flex;
		align-items: center;
		border-bottom: 3rpx solid #e5e5e5;
		.get-code{
			height: 50upx;
			align-items: center;
			position: absolute;
			right: 0;
			padding: 0 20upx;
			// border-left: solid 1upx #fff;
			z-index: 10;
			font-size: 32upx;
			// &:after {
			// 	content: " ";
			// 	width: 1upx;
			// 	height: 50upx;
			// 	background-color: #ececec;
			// 	position: absolute;
			// 	z-index: 10;
			// 	margin-right: 100%;
			// 	left: 0;
			// 	
			// }
		}
	}
</style>
